<template>
  <div>
    <div class="food">
      <cube-scroll ref="scroll">
        <div class="food-content">
          <div class="image-header">
            <img :src="getName.image" />
            <div class="back" @click="back">
              <i class="cubeic-back"></i>
            </div>
          </div>
          <div class="content">
            <h1 class="title">{{ getName.name }}</h1>
            <div class="detail">
              <span class="sell-count">月售{{ getName.sellCount }}份</span>
              <span class="rating">好评率{{ getName.rating }}%</span>
            </div>
            <div class="price">
              <span class="now">￥{{ getName.price }}</span>
              <span class="old" v-show="getName.oldPrice"
                >￥{{ getName.oldPrice }}</span
              >
            </div>
            <!-- <div class="cart-control-wrapper">
            <cart-control ></cart-control>
            </div>-->
            <transition name="fade">
              <div class="buy">加入购物车</div>
            </transition>
          </div>
          <div class="info" v-show="getName.info">
            <h1 class="title">商品信息</h1>
            <p class="text">{{ getName.info }}</p>
          </div>

          <div class="rating" v-show="getName.ratings">
            <h1 class="title">商品评价</h1>
            <div class="rating-wrapper">
              <ul>
                <li
                  class="rating-item border-bottom-1px"
                  v-for="(rating, index) of getName.ratings"
                  :key="index"
                >
                  <div class="user">
                    <span class="name">{{ rating.username }}</span>
                    <img
                      class="avatar"
                      width="12"
                      height="12"
                      :src="rating.avatar"
                    />
                  </div>
                  <div class="time">{{ formatDate(rating.rateTime) }}</div>

                  <p class="text">
                    <i
                      v-show="rating.text"
                      :class="
                        rating.rateType === 0 ? 'cubeic-good' : 'cubeic-bad'
                      "
                    ></i>
                    {{ rating.text }}
                  </p>
                </li>
              </ul>
              <div class="no-rating" v-show="!getName.ratings">暂无评价</div>
            </div>
          </div>
        </div>
      </cube-scroll>
    </div>
    <shop-cart></shop-cart>
  </div>
</template>

<script type="text/ecmascript-6">
import moment from "moment";
import shopCart from '../components/shop-cart';
export default {
  name: "foodDetail",
  data() {
    return {
      getName: []
    };
  },
  components: {
    shopCart
  },
  computed:{
    //  selectFoods() {
    //   let foods = [];
    //   this.goods.forEach((good) => {
    //     good.foods.forEach((food) => {
    //       if (food.count) {
    //         foods.push(food);
    //       }
    //     });
    //   });
    //   return foods;
    // },
  },
  created() {
    this.getStr();
  },
  watch: {
    getName(old) {
      this.getName = old;
    }
  },
  methods: {
    getStr() {
      let retCons = JSON.parse(sessionStorage.getItem("retCons"));
      this.getName = retCons;
    },
    formatDate(time) {
      return moment(time).format("YYYY-MM-DD hh:mm");
    },
    back() {
      window.history.back(-1);
    }
  }
};
</script>

<style lang="stylus" scoped>
.food {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 48px;
  z-index: 30;
  width: 100%;
  background: #fff;

  &.move-enter-active, &.move-leave-active {
    transition: all 0.3s linear;
  }

  &.move-enter, &.move-leave-active {
    transform: translate3d(100%, 0, 0);
  }

  .image-header {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .back {
      position: absolute;
      top: 10px;
      left: 0;

      .cubeic-back {
        display: block;
        padding: 10px;
        font-size: 20px;
        color: #fff;
      }
    }
  }

  /deep/.content {
    position: relative;
    padding: 18px;
    text-align: left;

    .title {
      line-height: 14px;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #333;
    }

    .detail {
      margin-bottom: 18px;
      line-height: 10px;
      height: 10px;

      .sell-count, .rating {
        font-size: 10px;
        color: #999;
      }

      .sell-count {
        margin-right: 12px;
      }
    }

    .price {
      line-height: 24px;
      font-weight: 700;

      .now {
        margin-right: 8px;
        font-size: 14px;
        color: #f01414;
      }

      .old {
        text-decoration: line-through;
        font-size: 10px;
        color: #999;
      }
    }

    .cart-control-wrapper {
      position: absolute;
      right: 12px;
      bottom: 12px;
    }

    .buy {
      position: absolute;
      right: 18px;
      bottom: 18px;
      z-index: 10;
      height: 24px;
      line-height: 24px;
      padding: 0 12px;
      box-sizing: border-box;
      border-radius: 12px;
      font-size: 10px;
      color: #fff;
      background: #00a0dc;
      opacity: 1;

      &.fade-enter-active, &.fade-leave-active {
        transition: all 0.3s;
      }

      &.fade-enter, &.fade-leave-active {
        opacity: 0;
        z-index: -1;
      }
    }
  }

  .info {
    padding: 18px;
    text-align: left;

    .title {
      line-height: 14px;
      margin-bottom: 6px;
      font-size: 14px;
      color: #333;
    }

    .text {
      line-height: 24px;
      padding: 0 8px;
      font-size: 14px;
      color: #333;
    }
  }

  .rating {
    padding-top: 18px;
    text-align: left;

    .title {
      line-height: 14px;
      margin-left: 18px;
      font-size: 14px;
      color: #333;
    }

    .rating-wrapper {
      padding: 0 18px;

      .rating-item {
        position: relative;
        padding: 16px 0;

        &:last-child {
          border-none();
        }

        .user {
          position: absolute;
          right: 0;
          top: 16px;
          display: flex;
          align-items: center;
          line-height: 12px;

          .name {
            margin-right: 6px;
            font-size: 10px;
            color: #999;
          }

          .avatar {
            border-radius: 50%;
          }
        }

        .time {
          margin-bottom: 6px;
          line-height: 12px;
          font-size: 10px;
          color: #999;
        }

        .text {
          line-height: 16px;
          font-size: $fontsize-small;
          color: #333;

          .icon-thumb_up, .icon-thumb_down {
            margin-right: 4px;
            line-height: 16px;
            font-size: $fontsize-small;
          }

          .icon-thumb_up {
            color: $color-blue;
          }

          .icon-thumb_down {
            color: #999;
          }
        }
      }

      .no-rating {
        padding: 16px 0;
        font-size: $fontsize-small;
        color: #999;
      }
    }
  }
}

.shop-cart-wrapper {
  bottom: 0;
  height: 48px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 50;

  .shopcart {
    height: 100%;

    .content {
      background: #07111b;
      color: #999;
      display: flex;
      font-size: 0;

      .content-left {
        flex: 1;

        .logo-wrapper {
          background: #07111b;
          border-radius: 50%;
          box-sizing: border-box;
          display: inline-block;
          height: 56px;
          margin: 0 12px;
          padding: 6px;
          position: relative;
          top: -10px;
          vertical-align: top;
          width: 56px;

          .logo {
            background: #333;
            border-radius: 50%;
            height: 100%;
            text-align: center;
            width: 100%;

            .cubeic-mall {
              color: #999;
              font-size: 24px;
              line-height: 44px;
            }
          }

          .num {
            position: absolute;
            right: 0;
            top: 0;

            .bubble {
              background: linear-gradient(90deg, #fc9153, #f01414);
              border-radius: 16px;
              color: #fff;
              display: inline-block;
              font-family: Helvetica;
              font-size: 10px;
              font-weight: 700;
              height: 16px;
              line-height: 16px;
              padding: 0 5px;
              text-align: center;
            }
          }
        }

        .price {
          border-right: 1px solid hsla(0, 0%, 100%, 0.1);
          box-sizing: border-box;
          display: inline-block;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          margin-top: 12px;
          padding-right: 12px;
          vertical-align: top;
        }

        .desc {
          display: inline-block;
          font-size: 10px;
          line-height: 24px;
          margin: 12px 0 0 12px;
          vertical-align: top;
        }
      }

      .content-right {
        -webkit-box-flex: 0;
        flex: 0 0 105px;
        width: 105px;

        .pay {
          font-size: 12px;
          font-weight: 700;
          height: 48px;
          line-height: 48px;
          text-align: center;
          background: #333;
        }
      }
    }
  }
}
</style>
